<template>
  <div class="demo-page">
    <!-- <ArticleList v-model="articleListData" :isPreview="false" /> -->
    <!-- <BannerPage v-model="bannerPageData" :isPreview="false"></BannerPage> -->
    <!-- <BannerImage v-model="bannerImageData" :isPreview="false"></BannerImage> -->
    <!-- <BtnList v-model="btnListData" :isPreview="false" /> -->
    <!-- <CustomSpace v-model="customSpaceData" :isPreview="false"></CustomSpace> -->
    <!-- <GalleryList v-model="galleryListData" :isPreview="false" /> -->
    <!-- <HeroSlide v-model="heroSlideData" :isPreview="false"></HeroSlide> -->
    <!-- <LinkList v-model="linkListData" :isPreview="false" /> -->
    <!-- <QuoteText v-model="quoteTextData" :isPreview="false" /> -->
    <!-- <DonorLinks v-model="donorLinksData" :isPreview="false" /> -->
    <!-- <CardCarousel v-model="cardCarouselData" :isPreview="false" /> -->
    <!-- <CardCarouselMultiRow v-model="cardCarouselMultiRowData" :isPreview="false" /> -->
    <!-- <BannerQuote v-model="bannerQuoteData" :isPreview="false" /> -->
    <!-- <ArticleItem v-model="articleItemData" :isPreview="false" /> -->
    <!-- <RibbonBlock v-model="ribbonBlockData" :isPreview="false" /> -->
    <!-- <GalleryDefault v-model="galleryDefaultData" :isPreview="false"></GalleryDefault> -->
    <!-- <GalleryCaptionRound v-model="galleryCaptionRoundData" :isPreview="false"></GalleryCaptionRound>
    <GalleryTimeline v-model="galleryTimelineData" :isPreview="false"></GalleryTimeline>
    <GalleryTimelineCol v-model="galleryTimelineColData" :isPreview="false"></GalleryTimelineCol>
    <TheHistoryCarousel v-model="theHistoryCarouselData" :isPreview="false"></TheHistoryCarousel>
    <TimelineStory v-model="timelineStoryData" :isPreview="false"></TimelineStory>
    <Process v-model="processData" :isPreview="false" />
    <NewsList v-model="newsListData" :isPreview="false"></NewsList> -->
    <!-- <CardShowcaseProfile v-model="cardShowcaseProfileData" :isPreview="false"></CardShowcaseProfile> -->
    <!-- <CarouselLogo v-model="carouselLogoData" :isPreview="false"></CarouselLogo> -->
    <!-- <Resources v-model="resourcesData" :isPreview="false"></Resources> -->
    <!-- <ResourcesTwo v-model="resourcesTwoData" :isPreview="false"></ResourcesTwo> -->
    <!-- <Disc v-model="discData" :isPreview="false"></Disc> -->
    <!-- <BasicCollapse v-model="basicCollapseData" :isPreview="false"></BasicCollapse> -->
    <!-- <TableCollapse v-model="tableCollapseData" :isPreview="false"></TableCollapse> -->
    <!-- <MediaLogo v-model="mediaLogoData" :isPreview="false"></MediaLogo> -->
    <!-- <RegisterForm v-model="registerFormData" :isPreview="false"></RegisterForm> -->
    <!-- <GalleryBlock v-model="galleryBlockData" :isPreview="false"></GalleryBlock> -->
    <!-- <ExploreLinks v-model="exploreLinksData" :isPreview="false"></ExploreLinks> -->

    <!-- <CardCarouselMultiRowPublications v-model="cardCarouselMultiRowPublicationsData" :isPreview="false"></CardCarouselMultiRowPublications> -->
    <!-- <BlessingMessage v-model="blessingMessageData" :isPreview="false"></BlessingMessage> -->
    <!-- <BlessingSlider v-model="blessingSliderData" :isPreview="false"></BlessingSlider> -->
    <!-- <AlummiCommunityList v-model="alummiCommunityListData" :isPreview="false"></AlummiCommunityList> -->
    <!-- <SchoolLayout v-model="schoolLayoutData" :isPreview="false"></SchoolLayout> -->
    <!-- <CardShowcase v-model="cardShowcaseData" :isPreview="false"></CardShowcase> -->

    <!-- <CustomIframe v-model="customIframeData" :isPreview="false" />
    <BannerImageWithLink v-model="BannerImageWithLinkData" :isPreview="false" />
    <ContactUsList v-model="contactUsListData" :isPreview="false" />
    <TableTwo v-model="tableTwoData" :isPreview="false" /> -->
    <ScrollKeyInfo v-model="ScrollKeyInfoData" />
    <!-- <ContactUsInfo v-model="contactUsInfoData" />
    <Publications v-model="PublicationsData" />
    <MapStatic v-model="mapStaticData"></MapStatic>
    <CardCarouselArticles v-model="cardCarouselArticlesData"></CardCarouselArticles>
     <CountDown v-model="countDownData"></CountDown> -->
    <!-- <TabDefault v-model="defaultTabData"></TabDefault> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { randomString } from "@/utils/common";
import ArticleList from "@/components/ArticleList/index.vue";
import BannerPage from "@/components/BannerPage/index.vue";
import CustomSpace from "@/components/CustomSpace/index.vue";
import HeroSlide from "@/components/HeroSlide/index.vue";
import BannerImage from "@/components/BannerImage/index.vue";
import QuoteText from "@/components/QuoteText/index.vue";
import GalleryList from "@/components/GalleryList/index.vue";
import BtnList from "@/components/BtnList/index.vue";
import LinkList from "@/components/LinkLIst/index.vue";
import TabDefault from "@/components/TabDefault/index.vue";
import CustomIframe from "@/components/CustomIframe/index.vue";
import BannerImageWithLink from "@/components/BannerImageWithLink/index.vue";
import ContactUsList from "@/components/ContactUsList/index.vue";
import TableTwo from "@/components/TableTwo/index.vue";
import ScrollKeyInfo from "@/components/ScrollKeyInfo/index.vue";
import DonorLinks from "@/components/DonorLinks/index.vue";
import CardCarousel from "@/components/CardCarousel/index.vue";
import CardCarouselMultiRow from "@/components/CardCarouselMultiRow/index.vue";
import BannerQuote from "@/components/BannerQuote/index.vue";
import ArticleItem from "@/components/ArticleItem/index.vue";
import RibbonBlock from "@/components/RibbonBlock/index.vue";
import GalleryDefault from "@/components/GalleryDefault/index.vue";
import GalleryCaptionRound from "@/components/GalleryCaptionRound/index.vue";
import GalleryTimeline from "@/components/GalleryTimeline/index.vue";
import GalleryTimelineCol from "@/components/GalleryTimelineCol/index.vue";
import TheHistoryCarousel from "@/components/TheHistoryCarousel/index.vue";
import TimelineStory from "@/components/TimelineStory/index.vue";
import Process from "@/components/Process/index.vue";
import ContactUsInfo from "@/components/ContactUsInfo/index.vue";
import Publications from "@/components/Publications/index.vue";
import MapStatic from "@/components/MapStatic/index.vue";
import CardCarouselArticles from "@/components/CardCarouselArticles/index.vue";
import NewsList from "@/components/NewsList/index.vue";
import CardShowcaseProfile from "@/components/CardShowcaseProfile/index.vue";
import CountDown from "@/components/CountDown/index.vue";
import CarouselLogo from "@/components/CarouselLogo/index.vue";
import Resources from "@/components/Resources/index.vue";
import ResourcesTwo from "@/components/ResourcesTwo/index.vue";
import Disc from "@/components/Disc/index.vue";
import BasicCollapse from "@/components/BasicCollapse/index.vue";
import TableCollapse from "@/components/TableCollapse/index.vue";
import MediaLogo from "@/components/MediaLogo/index.vue";
import RegisterForm from "@/components/RegisterForm/index.vue";
import GalleryBlock from "@/components/GalleryBlock/index.vue";
import CardCarouselMultiRowPublications from "@/components/CardCarouselMultiRowPublications/index.vue";
import BlessingMessage from "@/components/BlessingMessage/index.vue";
import BlessingSlider from "@/components/BlessingSlider/index.vue";
import ExploreLinks from "@/components/ExploreLinks/index.vue";
import AlummiCommunityList from "@/components/AlummiCommunityList/index.vue";
import SchoolLayout from "@/components/SchoolLayout/index.vue";
import CardShowcase from "@/components/CardShowcase/index.vue";
import { provide } from "vue";

const bannerPageData = ref();
const articleListData = ref();
const customSpaceData = ref();
const heroSlideData = ref();
const bannerImageData = ref();
const quoteTextData = ref();
const galleryListData = ref();
const btnListData = ref();
const linkListData = ref();
const countDownData = ref();
const defaultTabData = ref();
const customIframeData = ref();
const BannerImageWithLinkData = ref();
const contactUsListData = ref();
const tableTwoData = ref();
const ScrollKeyInfoData = ref();
const donorLinksData = ref();
const cardCarouselData = ref();
const cardCarouselMultiRowData = ref();
const bannerQuoteData = ref();
const articleItemData = ref();
const ribbonBlockData = ref();
const galleryDefaultData = ref();
const galleryCaptionRoundData = ref();
const galleryTimelineData = ref();
const galleryTimelineColData = ref();
const theHistoryCarouselData = ref();
const timelineStoryData = ref();
const processData = ref();
const contactUsInfoData = ref();
const PublicationsData = ref();
const mapStaticData = ref();
const cardCarouselArticlesData = ref();
const newsListData = ref();
const cardShowcaseProfileData = ref();
const carouselLogoData = ref();
const resourcesData = ref();
const resourcesTwoData = ref();
const discData = ref();
const basicCollapseData = ref();
const tableCollapseData = ref();
const mediaLogoData = ref();
const registerFormData = ref();
const galleryBlockData = ref();
const cardCarouselMultiRowPublicationsData = ref();
const blessingMessageData = ref();
const blessingSliderData = ref();
const exploreLinksData = ref();
const alummiCommunityListData = ref();
const schoolLayoutData = ref();
const cardShowcaseData = ref();

const chooseName = ref("");
const fileUrl = ref("");
// 定义接收消息的方法
const handleMessageFromDescendant = (flag: boolean, name: string) => {
  chooseName.value = name;
  console.log("收到子孙消息:", flag, name);
  // 在这里处理子孙组件传递过来的数据或执行操作
  setTimeout(() => {
    fileUrl.value =
      "https://cms-dev-local.oss-cn-beijing.aliyuncs.com/704800b4-6a5e-41b1-b206-28365be3e69e.jpg";
  }, 1000);
};

// 提供函数给子孙组件
provide("handleUpload", handleMessageFromDescendant);
provide("chooseName", chooseName);
provide("fileUrl", fileUrl);
</script>

<style scoped>
.demo-page {
  background: #fff;
  padding-top: 20px;
}

.description {
  font-size: 16px;
  line-height: 1.6;
  color: #606266;
  margin-bottom: 32px;
}

.demo-section {
  margin: 32px 0;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.demo-container {
  padding: 24px;
  background: #fff;
}

.demo-code {
  background: #f8f9fa;
  border-top: 1px solid #e4e7ed;
}

.demo-code pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
}

.demo-code code {
  font-size: 14px;
  line-height: 1.5;
  color: #303133;
}

.size-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.size-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.size-item label {
  width: 80px;
  font-weight: 500;
  color: #303133;
}

.event-log {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.event-log h4 {
  margin: 0 0 12px 0;
  color: #303133;
}

.event-log ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-log li {
  padding: 4px 0;
  font-size: 12px;
  color: #606266;
}

.api-section {
  margin: 48px 0;
}

.api-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  margin: 16px 0;
}

.api-table th,
.api-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e4e7ed;
}

.api-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #303133;
}

.api-table td {
  color: #606266;
}

.api-table tr:last-child td {
  border-bottom: none;
}

h1 {
  color: #303133;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 24px;
}

h2 {
  color: #303133;
  font-size: 24px;
  font-weight: 600;
  margin: 48px 0 16px 0;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 8px;
}

h3 {
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 12px 0;
}
</style>
